Summary

Removed Suspense from extraCta to fix server boundary crash in header. This does fix the error but it's not super optimal as we're loosing the <SearchButtonImpl isLoading /> state.

Rationale

I think the issue is that Nextjs can’t stream Suspense data inside props passed to a Client Component;

  <AppShell (client)
    ...
    extraCta={
      <Suspense fallback={<SearchButtonImpl isLoading />}>
        <SearchButton />
      </Suspense>
    }
  >
    {children}
  </AppShell>

And it throws The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.

Another possible way to fix this would be to just fetch the data on the client side with useState/useEffect.

Tried a few other ways, but couldn't really get it to either work or not throw the same error.

How has this been tested?

• Current tests cover my changes
• Added new tests
• Manually tested the code